﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>猿动力</title>
	<link rel="stylesheet" type="text/css" href="css/icon-font/iconfont.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<div class="top">
		<div id="logo" class="fl">
			<img src="image/logo.png" alt="">
		</div>
		<div class="nav fl">
		    <ul>
		        <li><a href="javascript:void(0);"><span>首</span>页</a></li><!--
		     --><li><a href="#aboutus01"><span>特</span>色服务</a></li><!--
		     --><li><a href="#bottom"><span>加</span>盟商家</a></li><!--
		     --><li><a href="#bottom"><span>联</span>系我们</a></li>
		    </ul>
		</div> 
		<div class="right fr" style="display: none;">
			<ul class="fix">
				<li><a href="javascript:void(0);"><i class="icon iconfont icon-unie61d"></i></a></li>
				<li><a href="javascript:void(0);"><i class="icon iconfont icon-QQ"></i></a></li>
				<li><a href="javascript:void(0);"><i class="icon iconfont icon-kongjian"></i></a></li>
				<li><a href="javascript:void(0);"><i class="icon iconfont icon-weixin"></i></a></li>
			</ul>
		</div>
	</div>
	<div class="banner">
		<!-- <img src="image/banner.jpg" alt=""> -->
		<div class="banner" id="b04">
		    <ul>
		        <li><img src="image/banner01.jpg" alt=""></li>
		        <li><img src="image/banner02.jpg" alt=""></li>
		        <li><img src="image/banner03.jpg" alt=""></li>
		        <li><img src="image/banner04.jpg" alt=""></li>
		    </ul>
		    <a href="javascript:void(0);" class="unslider-arrow04 prev"><img class="arrow" id="al" src="image/arrowl.png" alt="prev" width="20" height="35"></a>
		    <a href="javascript:void(0);" class="unslider-arrow04 next"><img class="arrow" id="ar" src="image/arrowr.png" alt="next" width="20" height="37"></a>
		</div>
	</div>
	<div id="aboutus01" class="aboutus">
		<!-- <img src="image/ad01.jpg" alt=""> -->
		<p class="title">满足不同的你，对高铁出行的各种需求</p>
		<div class="list01">
			<ul>
				<li>
					<a href="javascript:void(0);">
						<img src="image/img01.png" alt="">
						<p class="text">到处都说最划算，哪家才是最低价？</p>
						<p class="line"></p>
					</a>
				</li>
				<li>
					<a href="javascript:void(0);">
						<img src="image/img02.png" alt="">
						<p class="text">指示牌那么多取票窗口在哪？</p>
						<p class="line"></p>
					</a>
				</li>
				<li>
					<a href="javascript:void(0);">
						<img src="image/img03.png" alt="">
						<p class="text">坐车实在太无聊，玩点啥？</p>
						<p class="line"></p>
					</a>
				</li>
				<li>
					<a href="javascript:void(0);">
						<img src="image/img04.png" alt="">
						<p class="text">想睡觉又怕坐过站，咋整啊？</p>
						<p class="line"></p>
					</a>
				</li>
			</ul>
		</div>
		<div class="function-us">
			<p class="function-title">猿动力，出行新动力</p>
			<p class="function-info">致力于为高铁出行用户提供吃喝玩乐购的一站式出行服务，率先将智慧出行、交友互助、优选理念</p>
			<p class="function-info">等概念融入高铁行程，让差旅更美好。</p>
		</div>
	</div>
	<div id="aboutus02" class="aboutus bg-col01">
		<div class="aboutus_bg fix">
			<p class="title">智慧出行，给你不一样的旅行体验</p>
			<div class="fl">
				<img src="image/img05.png" alt="">
			</div>
			<div class="about fr">
				<p class="firstInfo">酒店/机票全网比价，一键搞定最划算</p>
				<p class="secondInfo">提供海量资源，拥有强大的筛选功能，让你轻松订到最划算的机票/酒店</p>
			</div>
			
		</div>
	</div>
	<div id="aboutus03" class="aboutus">
		<div class="aboutus_bg fix">
			<div class="about fl" style="padding-right: 0;">
				<p class="firstInfo">组建高铁社交圈子，一键打发时间</p>
				<p class="secondInfo">匹配同程乘客，探讨共同话题，形成即时互动，实现一对一聊天，拓展你的社交圈</p>
			</div>
			<div class="fr" style="padding-right: 12%;">
				<img src="image/img06.png" alt="">
			</div>
		</div>	
	</div>
	<div id="aboutus04" class="aboutus bg-col01">
		<div class="aboutus_bg fix">
			<div class="about fr">
				<p class="firstInfo">智能提醒上线，一键摆脱匆匆忙忙</p>
				<p class="secondInfo">行程清单、实时位置显示、到站提醒、差旅账单——您的秘书上线，行程已安排妥当</p>
			</div>
			<div class="fl">
				<img src="image/img07.png" alt="">
			</div>
		</div>	
	</div>
	<div id="aboutus05" class="aboutus">
		<div class="aboutus_bg fix">
			<div class="about fl" style="padding-right: 0;">
				<p class="firstInfo">引进智慧购票，一键筛选最优路线</p>
				<p class="secondInfo">高铁订票植入智慧概念，智能规划路线，快速推荐最佳乘车方案，让你快人一步</p>
			</div>
			<div class="fr" style="padding-right: 12%;">
				<img src="image/img08.png" alt="">
			</div>
		</div>	
	</div>
<!-- 	<div id="aboutus06" class="aboutus bg-col01">
		<div class="aboutus_bg fix">
			<div class="about fr">
				<p class="firstInfo">启用信用出行，一键共享信用经济</p>
				<p class="secondInfo">免注册，操作流程简单，用户轻松享受“先享后付”待遇，三十天还款免息</p>
			</div>
			<div class="fl">
				<img src="image/img09.png" alt="">
			</div>
		</div>	
	</div> -->
	<div id="aboutus07" class="aboutus bg-col01">
		<div class="aboutus_bg fix">
			<div class="about fr">
				<p class="firstInfo">站内AR实景导航，一键告别路痴</p>
				<p class="secondInfo">开启高铁站内更清晰的导航体验，只需结合语音导航，真实场景，即可找到方向</p>
			</div>
			<div class="fl">
				<img src="image/img10.png" alt="">
			</div>
		</div>	
	</div>

	<div class="bottom" id="bottom">
		<p class="title">加盟商家</p>
		<div class="merchantLogo">
			<ul class="merchantList fix">
				<li><img src="image/merchantLogo01.png" alt=""></li>
				<li><img src="image/merchantLogo02.png" alt=""></li>
				<li><img src="image/merchantLogo03.png" alt=""></li>
				<li><img src="image/merchantLogo04.png" alt=""></li>
				<li><img src="image/merchantLogo05.png" alt=""></li>
			</ul>
		</div>
		<p class="company">深圳前海猿动力信息技术有限公司</p>
		<p class="address">公司地址：广东省深圳市福田区上梅林奥士达大厦6楼  |  招商热线：400-900-3736</p>
		<div class="code">
			<img src="image/codeImg.png" alt="">
			<p>扫一扫 联系我们</p>
		</div>
	</div>
</body>
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/unslider.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(e) {
	    var unslider04 = $('#b04').unslider({
	        dots: true
	    }),
	    data04 = unslider04.data('unslider');
	     
	    $('.unslider-arrow04').click(function() {
	        var fn = this.className.split(' ')[1];
	        data04[fn]();
	    });
	});
	// $('.nav ul li').on('click',function(){
	// 	$(this).css('background-color','rgba(255,255,255,0.3)').siblings().css('background-color','rgba(0,0,0,0)');
	// 	$(this).find('a').css('color','#ff6600').parent().siblings().find('a').css('color','#fff');
	// 	$(this).find('a span').addClass('underline').parent().parent().siblings().find('a span').removeClass('underline');
	// });
	$('.right ul li a').on('click',function(){
		$(this).css('color','#ff6600').parent().siblings().find('a').css('color','#fff');
	});
</script>
</html>